<template>
    <div style="display: grid;  grid-template-columns: min-content min-content min-content min-content;">
        <el-button type="primary" v-show="!isEdit" :icon="Edit" @click="edit">
            编辑
        </el-button>
        <el-button v-if="props.showDelete" v-show="!isEdit" :icon="Delete" @click="onDelete">
            删除
        </el-button>
        <el-button v-show="isEdit" :icon="Close" @click="cancel">
            取消
        </el-button>
        <el-button type="primary" v-show="isEdit" :icon="Check" @click="save">
            保存
        </el-button>
    </div>
</template>
<script lang="ts" setup>
// 编辑按钮组, 控制编辑和非编辑状态的按钮显示, 对删除操作进行确认
// 不建议使用
import { ref } from 'vue'
import { Edit, Check, Delete, Close } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { clog } from '/@/utils'

defineOptions({
    name: 'MkEditButtonGroup'
})
// props
const props = defineProps({
    showDelete: {
        type: Boolean,
        default: true
    },
})

const isEdit = ref(false);
const saveSuccess = ref(false);

//定义回调函数
const emit = defineEmits<{
    (e: 'save', saveSuccess)
    (e: 'delete')
    (e: 'update:isEdit', isEdit)
    (e: 'cancel')
}>()

const edit = () => {
    isEdit.value = true;
    emit('update:isEdit', isEdit.value) //更新Prop和绑定在此Prop上父组件的值
};

const cancel = () => {
    isEdit.value = false;
    emit('update:isEdit', isEdit.value) //更新Prop和绑定在此Prop上父组件的值
    emit('cancel')
};

const save = () => {
    saveSuccess.value = true; // 默认保存成功
    emit('save', saveSuccess)
    isEdit.value = !saveSuccess.value; //默认恢复到非编辑状态
    emit('update:isEdit', isEdit.value) //更新Prop和绑定在此Prop上父组件的值
};

const onDelete = () => {
    ElMessageBox.confirm('确定删除吗?', 'Warning',
        {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            // 确认删除
            emit('delete')
        }).catch(() => {
            // 取消不处理
        })
};
</script>
